<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D骰子</title>
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;        
	}
	.block{
		border: 1px solid #000;
		padding: 100px 0;
		-webkit-perspective: 800px;
		-moz-perspective: 800px;
		perspective: 800px;
		-webkit-perspective-orign: 50% 50%;
		-moz-perspective-orign: 50% 50%;
		perspective-orign: 50% 50%;
	}
	.dice{
		width: 300px;
		height: 300px;
		margin: 20px auto;
		position: relative;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	.page{
	    width: 200px;
	    height: 200px;
	    background: rgba(0,0,0,0.3);
	    position: absolute;
	    font-size: 200px;
	    color: #fff;
	    line-height: 200px;
	    text-align: center;
	    border: 1px solid red;
	}
	#page2{
		-webkit-transform: rotateY(-90deg);
		-moz-transform: rotateY(-90deg);
		-ms-transform: rotateY(-90deg);
		-o-transform: rotateY(-90deg);
		transform: rotateY(-90deg);
		-webkit-transform-origin: right;
		-moz-transform-origin: right;
		-ms-transform-origin: right;
		-o-transform-origin: right;
		transform-origin: right;
	}
	#page3{
		-webkit-transform: translateZ(-200px);
		-moz-transform: translateZ(-200px);
		-ms-transform: translateZ(-200px);
		-o-transform: translateZ(-200px);
		transform: translateZ(-200px);
		-webkit-transform-origin: right;
		-moz-transform-origin: right;
		-ms-transform-origin: right;
		-o-transform-origin: right;
	}
	#page4{
		-webkit-transform: rotateY(90deg);
		-moz-transform: rotateY(90deg);
		-ms-transform: rotateY(90deg);
		-o-transform: rotateY(90deg);
		transform: rotateY(90deg);
		-webkit-transform-origin: left;
		-moz-transform-origin: left;
		-ms-transform-origin: left;
		-o-transform-origin: left;
	}
	#page5{
		-webkit-transform: rotateX(-90deg);
		-moz-transform: rotateX(-90deg);
		-ms-transform: rotateX(-90deg);
		-o-transform: rotateX(-90deg);
		transform: rotateX(-90deg);
		-webkit-transform-origin: top;
		-moz-transform-origin: top;
		-ms-transform-origin: top;
		-o-transform-origin: top;
	}
	#page6{
		-webkit-transform: rotateX(90deg);
		-moz-transform: rotateX(90deg);
		-ms-transform: rotateX(90deg);
		-o-transform: rotateX(90deg);
		transform: rotateX(90deg);
		-webkit-transform-origin: bottom;
		-moz-transform-origin: bottom;
		-ms-transform-origin: bottom;
		-o-transform-origin: bottom;       
	}
	@-webkit-keyframes random-rotate{
		0%{
			-webkit-transform:rotateX(0deg) rotateY(0deg);
			-moz-transform:rotateX(0deg) rotateY(0deg);
			-o-transform:rotateX(0deg) rotateY(0deg);
			transform:rotateX(0deg) rotateY(0deg);
		}
		100%{
			-webkit-transform:rotateX(360deg) rotateY(360deg);
			-moz-transform:rotateX(360deg) rotateY(360deg);
			-o-transform:rotateX(360deg) rotateY(360deg);
			transform:rotateX(360deg) rotateY(360deg);
		}
	}
	@-moz-keyframes random-rotate{
		0%{
			-webkit-transform:rotateX(0deg) rotateY(0deg);
			-moz-transform:rotateX(0deg) rotateY(0deg);
			-o-transform:rotateX(0deg) rotateY(0deg);
			transform:rotateX(0deg) rotateY(0deg);
		}
		100%{
			-webkit-transform:rotateX(360deg) rotateY(360deg);
			-moz-transform:rotateX(360deg) rotateY(360deg);
			-o-transform:rotateX(360deg) rotateY(360deg);
			transform:rotateX(360deg) rotateY(360deg);
		}
	}
	@-o-keyframes random-rotate{
		0%{
			-webkit-transform:rotateX(0deg) rotateY(0deg);
			-moz-transform:rotateX(0deg) rotateY(0deg);
			-o-transform:rotateX(0deg) rotateY(0deg);
			transform:rotateX(0deg) rotateY(0deg);
		}
		100%{
			-webkit-transform:rotateX(360deg) rotateY(360deg);
			-moz-transform:rotateX(360deg) rotateY(360deg);
			-o-transform:rotateX(360deg) rotateY(360deg);
			transform:rotateX(360deg) rotateY(360deg);
		}
	}
	@keyframes random-rotate{
		0%{
			-webkit-transform:rotateX(0deg) rotateY(0deg);
			-moz-transform:rotateX(0deg) rotateY(0deg);
			-o-transform:rotateX(0deg) rotateY(0deg);
			transform:rotateX(0deg) rotateY(0deg);
		}
		100%{
			-webkit-transform:rotateX(360deg) rotateY(360deg);
			-moz-transform:rotateX(360deg) rotateY(360deg);
			-o-transform:rotateX(360deg) rotateY(360deg);
			transform:rotateX(360deg) rotateY(360deg);
		}
	}
	.dice{
		width: 300px;
		height: 300px;
		margin: 20px auto;
		position: relative;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-animation: random-rotate 5s linear 0s infinite;
		-moz-animation: random-rotate 5s linear 0s infinite;
		-ms-animation: random-rotate 5s linear 0s infinite;
		-o-animation: random-rotate 5s linear 0s infinite;
		animation: random-rotate 5s linear 0s infinite;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
	}
	</style>
</head>
<body>
	<div class="block">
        <div class="dice">
        	<div class="page" id="page1">1</div>
	        <div class="page" id="page2">2</div>
	        <div class="page" id="page3">3</div>
	        <div class="page" id="page4">4</div>
	        <div class="page" id="page5">5</div>
	        <div class="page" id="page6">6</div>
        </div>
    </div>
</body>
</html>